<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./download/font_wuzv2jen5ba/iconfont.css"> -->
    <style>
        .box {
            display: flex;
        }

        .sp,
        .zb {
            margin-left: 50px;
            cursor: pointer;
        }

        .sp:hover {
            color: rgb(4, 247, 166);
        }

        .zb:hover {
            color: rgb(4, 247, 166);
        }

        .list {
            /* border: 1px solid black; */
            width: 600px;
            height: 500px;
        }

        ul {
            display: flex;
            justify-content: space-around
        }

        li {
            list-style: none;
            font-size: 20px;

        }

        img {
            width: 25px;
            height: 25px;
            /* margin-left: -30px; */

        }

        a {
            text-decoration: none;
            margin-left: 10px;
            color: rgb(41, 40, 40);
        }

        a:hover {
            color: rgb(255, 98, 0);
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- <p >视频</p>
        <p > 直播</p> -->
        <a href="#/shipin" class="sp">视频</a>
        <a href="#/zhibo" class="zb">直播</a>
    </div>
    <div class="list">
        <!-- <ul class="item">  -->
        <!-- <li><img src="./直播.png" alt="">
            <a href="">等级用户专属活动上线啦丨写好文，瓜分6万元现金大奖!</a> 
        </li>
            <li><a href=""></a> </li>
            <li><a href=""></a> </li>
            <li><a href=""></a> </li>
            <li><a href=""></a> </li> -->
        <!-- </ul> -->
    </div>

</body>

</html>
<script>
    var arr = [
        {
            img: './视频.png',
            title: "等级用户专属活动上线啦丨写好文,瓜分6万元现金大奖!"
        },
        { img: "./视频.png", title: "章若楠分享林野漫步随拍 撩拨秀发十足清新少女" },
        { img: "./视频.png", title: "《战神：诸神黄昏》今日发售，能否从老头环手里抢下 TGA 年度最佳？" },
        { img: "./视频.png", title: "叠纸游戏公布中国风开放世界动作新作《百面千相》，将登陆 PS5" },
        { img: "./视频.png", title: "Doinb吐露LPL拉胯原因：LCK练英雄输了会说可惜，我们会被喷退役" },
        { img: "./视频.png", title: "《赛博朋克2077》1.61补丁对比视频 所有版本性能改善" },
        { img: "./视频.png", title: "Switch订阅用户超3600万 销量破1.14亿台" },
    ]
    function render(arr) {
        let str = '';
        arr.forEach(item => {
            const { img, title } = item;
            str += `
        <!-- <ul class="item">  -->
            <li><img src="${img}" alt="">
            <a href="">${title}</a> 
        </li>
        </ul>
            `
        });
        document.querySelector(".list").innerHTML = str;
    }
    render(arr)

    var arr1 = [
        {
            img: './直播.png',
            title: "丰田全新轿车曝光！尺寸比卡罗拉还要大，下周三全球首发"
        },
        { img: "./直播.png", title: "iPhone15五大改变曝光！现款机主恐成大怨种" },
        { img: "./直播.png", title: "《黑豹2》口碑不俗将拍续集 定档11.11北美上映" },
        { img: "./直播.png", title: "斯皮尔伯格：HBO Max等流媒体降低了电影的档次" },
        { img: "./直播.png", title: "王一博直播翻车惹争议，代言品牌发布会上分享竞品，老总脸色大变" },
        { img: "./直播.png", title: "中场孱弱，不带边卫，法国的世界杯大名单只为安抚姆巴佩？" },
        { img: "./直播.png", title: "穆里尼奥又要抓内鬼了！他在每支队都重复相同过程，是不是甩锅？" },
    ]
    function renders(arr1) {
        let str = '';
        arr1.forEach(item => {
            const { img, title } = item;
            str += `
        <!-- <ul class="item">  -->
            <li><img src="${img}" alt="">
            <a href="">${title}</a> 
        </li>
        </ul>
            `
        });
        document.querySelector(".list").innerHTML = str;
    }
    renders(arr1)


    window.onhashchange = function () {
        switch (location.hash) {
            case '#/shipin': shipin_page(); break;
            case '#/zhibo': zhibo_page(); break;
        }
    }


    function shipin_page() {
        render(arr)
    }
        function zhibo_page() {
        renders(arr1)
    }
    
</script>